<template>
  <a-scrollbar style="height: 100%; overflow: auto">
    <a-checkbox-group v-model="checkIdList" @change="changeChecked">
      <div class="item" v-for="item of dataList" :key="item.id">
        <div class="top">
          <div class="checkbox lh50 fl">
            <a-checkbox :value="item.id" />
          </div>
          <div class="shop lh50 fl">
            <div class="icon icon-yamaxunxuanpin fl"></div>
            <div class="shop-name fl">
              <!-- <div>{{ item.shopName }}</div> -->
              <TextHidden style="width: 100px" :rows="1" position="top">{{ item.shopName }}</TextHidden>
            </div>
          </div>
          <div class="order-billNo lh50 fl">
            <div class="label-text fl">平台单号：</div>
            <div class="bill-no fl" @click.stop="toDetail(item)">
              <a-typography-paragraph class="highlight fl" copyable>{{ item.platformOrderNumber }}</a-typography-paragraph>
            </div>
          </div>

          <div class="lh50 fl" style="margin-right: 20px"> {{ filterStatus(item.status) }} </div>

          <div class="lh50 order-price fl">
            <div class="label-text fl">订单金额：</div>
            <!-- {{ currencySymbol }} -->
            <div class="bill-no fl"> {{ currencyObj[item.currency] }}{{ item.amtPay }} </div>
          </div>
          <div class="lh50 order-time fl">
            <div class="label-text fl">下单时间(+8)：</div>
            <div class="bill-no fl">{{ $setTime(item.gmtPurchase) }}</div>
          </div>

          <div class="order-deliver-time fl">
            <div class="label-text lh50 fl">承诺发货时间：</div>
            <div class="bill-no fl">
              <div style="margin-top: 4px">{{ $setTime(item.gmtLatestShip) }}</div>
              <a-countdown :value="new Date(item.gmtLatestShip).valueOf()" :now="now" format="D 天 H 时 m 分 s 秒" />
            </div>
          </div>

          <div class="order-tag fl">
            <span class="tag-item tag-bgc" :style="{ backgroundColor: tag.color }" v-for="tag of item.tagList" :key="tag.id">{{ tag.name }}</span>
            <span class="set-btn tag-item" @click="setTag(item)">设置标签</span>
          </div>
          <div class="handle-btn fr lh50">
            <a-button type="text" class="fl mr10" style="margin-top: 9px" @click="showEditAddModal(item)" v-if="[4, 6, 8].includes(statusCurrentIndex)">修改地址</a-button>
            <a-button type="text" class="fl mr10" style="margin-top: 9px" @click="relieveStop(item)" v-if="statusCurrentIndex == 5 && $authPass('oms.order.hand.relieveOrder')">解除禁止</a-button>
            <a-button type="text" class="fl" style="margin-top: 9px" @click="toDetail(item)">详情</a-button>
            <a-dropdown @select="orderSelect($event, item)" v-if="!['CANCELED', 'RETURN_GOODS,RETURN_AMT'].includes(orderStatus)">
              <a-button type="text" style="margin-left: 5px"><icon-more class="fl" style="font-size: 24px; margin-top: 15px" /></a-button>
              <template #content>
                <a-doption value="1" v-if="item.status == 201 && $authPass('oms.order.submitWarehouse')">提交仓库</a-doption>
                <a-doption value="2" v-if="getProductNum(item) > 1 && item.status == 201 && packageStatus(item)">手工拆单</a-doption>
                <a-doption value="3" v-if="item.status == 201 && $authPass('oms.order.hand.stopOrder')">禁止处理</a-doption>
                <a-doption value="4" v-if="item.status == 201 && $authPass('oms.order.cancel')">取消订单</a-doption>
                <a-doption value="5" v-if="item.source == 'OFFLINE' && item.status == 201 && $authPass('oms.order.saveOrUpdateOrder')" style="color: red">编辑订单</a-doption>
                <a-doption value="6" v-if="item.source == 'OFFLINE' && item.status == 201 && $authPass('oms.order.del')" style="color: red">删除订单</a-doption>
                <a-doption value="7" v-if="item.status == 201">复制订单</a-doption>
                <a-doption value="8">日志</a-doption>
              </template>
            </a-dropdown>
          </div>
        </div>

        <div class="middle">
          <div v-if="item.packageList && item.packageList[0]" class="clearfix">
            <div v-show="!item.isCollapse" class="no-collapse clearfix">
              <div class="btn-collapse fl clearfix">
                <div class="fl" v-if="getProductNum(item) > 1">
                  <icon-down-circle @click="item.isCollapse = true" />
                </div>
                <div v-if="getProductNum(item) > 1" class="fl highlight"> 多品{{ getProductNum(item) }} </div>
              </div>
              <div class="con mt10 fl clearfix" :style="{ marginLeft: index > 0 ? '60px' : '' }" :key="packageItem.id" v-for="(packageItem, index) of item.packageList">
                <a-popover>
                  <div class="left fl" style="font-size: 10px">
                    <span>{{ filterPackageStatus(packageItem) }}</span>
                  </div>
                  <template #content>
                    <p>包裹号：{{ packageItem.packageNumber }}</p>
                  </template>
                </a-popover>

                <div class="center fl">
                  <div class="product-item clearfix" :key="productItem.id" v-for="productItem of packageItem.packageItemList">
                    <div class="img fl">
                      <ImgPopover :src="getImage(productItem)">
                        <template #con>
                          <div @click="showProductModal(productItem, item)" style="width: 60px; height: 60px; position: relative; overflow: hidden">
                            <div class="flag" v-if="productItem.isCustom">定制</div>
                            <a-image :preview="false" width="60" height="60" :src="getImage(productItem)" />
                          </div>
                          <div v-if="-199 <= productItem.status && productItem.status <= -100" class="product-status" style="font-size: 10px">
                            <span class="text-scale">已取消</span>
                          </div>
                        </template>
                      </ImgPopover>
                    </div>
                    <div class="fl order-id">
                      <div>
                        <TextHidden position="top" :rows="1">{{ productItem.productName ? productItem.productName : '--' }}</TextHidden>
                      </div>
                      <div>
                        <TextHidden position="top" :rows="1">{{ productItem.asin }}</TextHidden>
                      </div>
                      <div>
                        <TextHidden position="top" :rows="1">{{ productItem.msku ? productItem.msku : '--' }}</TextHidden>
                      </div>
                    </div>
                    <div class="fl order-sell-info">
                      <div style="display: flex" class="block-con">
                        <div class="label-text">SKU：</div>
                        <!-- <div class="text-value">
                          <TextHidden class="highlight" position="top" :rowsWidth="80">{{ productItem.productSku ? productItem.productSku : '--' }}</TextHidden>
                        </div> -->
                        <div style="width: 80px">
                          <ShowSpuDetailBySku :val="productItem.productSku" :showLimit="true" :rows="1" />
                        </div>
                        <div @click="matchSkuForUser(productItem)" v-if="$authPass('oms.order.syncProductRelated')" class="icon icon-zdp-bianji1 icon-zdp-bianji1 fl highlight"></div>
                      </div>
                      <div style="display: flex">
                        <div class="label-text">销售：</div>
                        <div class="text-value"> {{ productItem.salerName ? productItem.salerName : '--' }} </div>
                      </div>
                      <div style="display: flex" class="block-con">
                        <div class="label-text">备注：</div>
                        <div class="text-value">
                          <TextHidden class="highlight" position="top" :rowsWidth="80">{{ productItem.remark ? productItem.remark : '--' }}</TextHidden>
                        </div>
                        <div @click="showRemarkModal('product', productItem)" class="icon icon-zdp-bianji1 fl highlight"></div>
                      </div>
                    </div>
                    <div class="fl order-num">
                      <div style="display: flex">
                        <div class="label-text">订购数：</div>
                        <div class="text-value"> {{ productItem.qtyOrdered ? productItem.qtyOrdered : '--' }} </div>
                      </div>
                      <div style="display: flex">
                        <div class="label-text">发货数：</div>
                        <div class="text-value"> {{ productItem.qtyPackageShipped ? productItem.qtyPackageShipped : '--' }}</div>
                      </div>
                      <div>
                        <span class="stockout" v-if="whetherOutOfStock(packageItem, productItem)">缺货</span>
                      </div>
                    </div>
                    <div class="fl order-num">
                      <div style="display: flex">
                        <div class="label-text">售价：</div>
                        <div class="text-value"> {{ productItem.amtSell || productItem.amtSell == 0 ? productItem.amtSell : '--' }} </div>
                      </div>
                      <div style="display: flex">
                        <div class="label-text">优惠：</div>
                        <div class="text-value"> {{ productItem.amtDiscount || productItem.amtSell == 0 ? productItem.amtDiscount : '--' }} </div>
                      </div>
                    </div>
                    <div class="fl order-pack">
                      <div style="display: flex" v-if="productItem.isCustom">
                        <div class="label-text">定制进度：</div>
                        <div class="text-value"> 待下单 </div>
                      </div>
                      <div style="display: flex" class="block-con">
                        <div class="label-text">包装：</div>
                        <div class="text-value">
                          <TextHidden position="top" :rowsWidth="80" v-if="productItem.packingName">{{ productItem.packingName }}</TextHidden>
                          <div v-else>--</div>
                        </div>
                        <div @click="showPackModal(productItem)" v-if="$authPass('oms.order.updateItemPack')" class="icon icon-zdp-bianji1 fl highlight"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="right fl">
                  <div class="fl">
                    <div style="display: flex">
                      <div class="label-text">配送方：</div>
                      <div class="text-value"> {{ filterFulfillmentType(packageItem.fulfillmentType || 'MFN') }} </div>
                    </div>
                    <div style="display: flex">
                      <div class="label-text">发货仓：</div>
                      <div class="text-value"> {{ packageItem.warehouseName ? packageItem.warehouseName : '--' }} </div>
                    </div>
                    <div style="display: flex">
                      <div class="label-text">包裹号：</div>
                      <div class="text-value"> {{ packageItem.packageNumber }} </div>
                    </div>
                  </div>
                  <div class="fl" style="margin-left: 20px">
                    <div style="display: flex">
                      <div class="label-text">渠道：</div>
                      <div class="text-value"> {{ packageItem.shippingMethodName }} </div>
                    </div>
                    <div style="display: flex" v-if="['CREATESUCCESS', null].includes(packageItem.shipStatus)">
                      <div class="label-text">承运商：</div>
                      <div class="text-value"> {{ packageItem.carrier }} </div>
                    </div>
                    <div style="display: flex" v-if="['CREATESUCCESS', null].includes(packageItem.shipStatus)">
                      <div class="label-text">跟踪号：</div>
                      <div class="text-value" style="width: 150px">
                        <TextHidden position="top" :rows="1">{{ packageItem.trackingNumber }}</TextHidden>
                      </div>
                    </div>
                    <div style="display: flex" v-if="packageItem.shipStatus == 'CREATEING'">
                      <div class="label-text">物流状态：</div>
                      <div class="text-value">创建中</div>
                    </div>
                    <div style="display: flex" v-if="packageItem.shipStatus == 'CREATEFAIL'">
                      <div class="label-text">物流状态：</div>
                      <div class="text-value">创建失败</div>
                    </div>
                    <div style="display: flex" v-if="packageItem.shipStatus == 'CREATEFAIL'">
                      <div class="label-text">失败原因：</div>
                      <TextHidden position="top" :rows="1">{{ packageItem.createShipErrorMsg }}</TextHidden>
                    </div>
                  </div>
                  <div class="fl" style="margin-left: 20px" v-if="statusCurrentIndex != 5 && !['CANCELED', 'SHIPPED', 'RETURN_GOODS,RETURN_AMT'].includes(orderStatus)">
                    <a-dropdown @select="doptionSelect($event, packageItem, item)">
                      <a-button type="text" style="margin-left: 5px">
                        操作
                        <!-- <icon-more class="fl" style="font-size: 24px; margin-top: 13px" /> -->
                      </a-button>
                      <template #content>
                        <!-- <a-doption value="1" v-if="orderStatus != 'UNSHIPPED_TOSHIP' && $authPass('oms.order.updatePackageWarehouse')">指定发货仓</a-doption>
                        <a-doption value="2" v-if="(packageItem.shipStatus != 'CREATEING' || orderStatus == 'UNSHIPPED_TOSHIP') && $authPass('oms.order.createOrderShip')">物流下单</a-doption>
                        <a-doption value="3" v-if="$authPass('oms.order.mulitChannel.bind') || $authPass('oms.order.mulitChannel.create')">多渠道配送</a-doption>
                        <a-doption value="4" v-if="$authPass('oms.order.submitWarehouse')">提交仓库</a-doption>
                        <a-doption value="5" v-if="orderStatus == 'UNSHIPPED_TOSHIP' && $authPass('oms.order.updatePackageWarehouse')">换仓</a-doption>
                        <a-doption value="6" v-if="orderStatus == 'UNSHIPPED_TOSHIP'">撤回待审核</a-doption>
                        <a-doption value="7" v-if="orderStatus == 'UNSHIPPED_TOSHIP' && packageItem.isMultichannel && $authPass('oms.order.mulitChannel.cancel')" style="color: red">取消多渠道配送</a-doption> -->

                        <a-doption value="1" v-if="['TO_CHECK'].includes(packageItem.status) && $authPass('oms.order.updatePackageWarehouse')">指定发货仓</a-doption>
                        <a-doption value="2" v-if="['TO_CHECK', 'TO_HAND'].includes(packageItem.status) && $authPass('oms.order.createOrderShip')">物流下单</a-doption>
                        <a-doption value="3" v-if="['TO_CHECK', 'TO_HAND'].includes(packageItem.status) && ($authPass('oms.order.mulitChannel.bind') || $authPass('oms.order.mulitChannel.create'))">多渠道配送</a-doption>
                        <a-doption value="4" v-if="['TO_CHECK'].includes(packageItem.status) && $authPass('oms.order.submitWarehouse')">提交仓库</a-doption>
                        <a-doption value="5" v-if="['TO_HAND'].includes(packageItem.status) && $authPass('oms.order.updatePackageWarehouse')">换仓</a-doption>
                        <a-doption value="6" v-if="['IN_PICKING', 'TO_OUTBOUND'].includes(packageItem.status)">撤回待审核</a-doption>
                        <a-doption value="7" v-if="['TO_HAND'].includes(packageItem.status) && packageItem.isMultichannel && $authPass('oms.order.mulitChannel.cancel')" style="color: red">取消多渠道配送</a-doption>
                      </template>
                    </a-dropdown>
                  </div>
                </div>
              </div>
            </div>
            <div v-show="item.isCollapse" class="collapse clearfix">
              <div class="btn-collapse fl">
                <div class="fl" v-if="getProductNum(item) > 1">
                  <icon-up-circle @click="item.isCollapse = false" />
                </div>
                <div v-if="getProductNum(item) > 1" class="fl highlight"> 多品{{ getProductNum(item) }} </div>
              </div>
              <div class="con mt10 fl clearfix" v-if="item.packageList && item.packageList[0]" v-for="(packageItem, index) of [item.packageList[0]]">
                <a-popover>
                  <div class="left fl" style="font-size: 10px">
                    <span>{{ filterPackageStatus(packageItem) }}</span>
                  </div>
                  <template #content>
                    <p>包裹号：{{ packageItem.packageNumber }}</p>
                  </template>
                </a-popover>
                <div class="center fl">
                  <div class="product-item clearfix" v-if="packageItem.packageItemList[0]" :key="productItem.id" v-for="productItem of [packageItem.packageItemList[0]]">
                    <div class="img fl">
                      <ImgPopover :src="getImage(productItem)">
                        <template #con>
                          <div @click="showProductModal(productItem, item)" style="width: 60px; height: 60px; position: relative; overflow: hidden">
                            <div class="flag" v-if="productItem.isCustom">定制</div>
                            <a-image :preview="false" width="60" height="60" :src="getImage(productItem)" />
                          </div>
                          <div v-if="-199 <= productItem.status && productItem.status <= -100" class="product-status" style="font-size: 10px">
                            <span class="text-scale">已取消</span>
                          </div>
                        </template>
                      </ImgPopover>
                    </div>
                    <div class="fl order-id">
                      <div>
                        <TextHidden position="top" :rows="1">{{ productItem.productName ? productItem.productName : '--' }}</TextHidden>
                      </div>
                      <div>
                        <TextHidden position="top" :rows="1">{{ productItem.asin }}</TextHidden>
                      </div>
                      <div>
                        <TextHidden position="top" :rows="1">{{ productItem.msku ? productItem.msku : '--' }}</TextHidden>
                      </div>
                    </div>
                    <div class="fl order-sell-info">
                      <div style="display: flex" class="block-con">
                        <div class="label-text">SKU：</div>
                        <div class="text-value">
                          <TextHidden class="highlight" position="top" :rows="1">{{ productItem.productSku ? productItem.productSku : '--' }}</TextHidden>
                        </div>
                        <div @click="matchSkuForUser(productItem)" v-if="$authPass('oms.order.syncProductRelated')" class="icon icon-zdp-bianji1 fl highlight"></div>
                      </div>
                      <div style="display: flex">
                        <div class="label-text">销售：</div>
                        <div class="text-value"> {{ productItem.salerName ? productItem.salerName : '--' }} </div>
                      </div>
                      <div style="display: flex" class="block-con">
                        <div class="label-text">备注：</div>
                        <div class="text-value">
                          <TextHidden class="highlight" position="top" :rows="1" :rowsWidth="80">{{ productItem.remark ? productItem.remark : '--' }}</TextHidden>
                        </div>
                        <div @click="showRemarkModal('product', productItem)" class="icon icon-zdp-bianji1 fl highlight"></div>
                      </div>
                    </div>
                    <div class="fl order-num">
                      <div style="display: flex">
                        <div class="label-text">订购数：</div>
                        <div class="text-value"> {{ productItem.qtyOrdered ? productItem.qtyOrdered : '--' }} </div>
                      </div>
                      <div style="display: flex">
                        <div class="label-text">发货数：</div>
                        <div class="text-value"> {{ productItem.qtyPackageShipped ? productItem.qtyPackageShipped : '--' }}</div>
                      </div>
                      <div>
                        <span class="stockout" v-if="whetherOutOfStock(packageItem, productItem)">缺货</span>
                      </div>
                    </div>
                    <div class="fl order-num">
                      <div style="display: flex">
                        <div class="label-text">售价：</div>
                        <div class="text-value"> {{ productItem.amtUnitSell ? productItem.amtUnitSell : '--' }} </div>
                      </div>
                      <div style="display: flex">
                        <div class="label-text">优惠：</div>
                        <div class="text-value"> {{ productItem.amtDiscount ? productItem.amtDiscount : '--' }} </div>
                      </div>
                    </div>
                    <div class="fl order-pack">
                      <div style="display: flex" v-if="productItem.isCustom">
                        <div class="label-text">定制进度：</div>
                        <div class="text-value"> 待下单 </div>
                      </div>
                      <div style="display: flex" class="block-con">
                        <div class="label-text">包装：</div>
                        <div class="text-value">
                          --
                          <!-- <TextHidden position="top" :rows="1">待定</TextHidden> -->
                        </div>
                        <div @click="showPackModal(productItem)" v-if="$authPass('oms.order.updateItemPack')" class="icon icon-zdp-bianji1 fl highlight"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="right fl">
                  <div class="fl">
                    <div style="display: flex">
                      <div class="label-text">配送方：</div>
                      <div class="text-value"> {{ filterFulfillmentType(packageItem.fulfillmentType) }} </div>
                    </div>
                    <div style="display: flex">
                      <div class="label-text">发货仓：</div>
                      <div class="text-value"> {{ packageItem.warehouseName ? packageItem.warehouseName : '--' }} </div>
                    </div>
                    <div style="display: flex">
                      <div class="label-text">包裹号：</div>
                      <div class="text-value"> {{ packageItem.packageNumber }} </div>
                    </div>
                  </div>
                  <div class="fl" style="margin-left: 20px">
                    <div style="display: flex">
                      <div class="label-text">渠道：</div>
                      <div class="text-value"> {{ packageItem.shippingMethodName }} </div>
                    </div>
                    <div style="display: flex">
                      <div class="label-text">承运商：</div>
                      <div class="text-value"> {{ packageItem.carrier }} </div>
                    </div>
                    <div style="display: flex">
                      <div class="label-text">跟踪号：</div>
                      <div class="text-value" style="width: 150px">
                        <TextHidden position="top" :rows="1">{{ packageItem.trackingNumber }}</TextHidden>
                      </div>
                    </div>
                  </div>
                  <div class="fl" style="margin-left: 20px" v-if="statusCurrentIndex != 5 && !['CANCELED', 'SHIPPED', 'RETURN_GOODS,RETURN_AMT'].includes(orderStatus)">
                    <a-dropdown @select="doptionSelect($event, packageItem, item)">
                      <a-button type="text" style="margin-left: 5px">
                        操作
                        <!-- <icon-more class="fl" style="font-size: 24px; margin-top: 13px" /> -->
                      </a-button>
                      <template #content>
                        <!-- <a-doption value="1" v-if="orderStatus != 'UNSHIPPED_TOSHIP' && $authPass('oms.order.updatePackageWarehouse')">指定发货仓</a-doption>
                        <a-doption value="2" v-if="(packageItem.shipStatus != 'CREATEING' || orderStatus == 'UNSHIPPED_TOSHIP') && $authPass('oms.order.createOrderShip')">物流下单</a-doption>
                        <a-doption value="3" v-if="$authPass('oms.order.mulitChannel.bind') || $authPass('oms.order.mulitChannel.create')">多渠道配送</a-doption>
                        <a-doption value="4" v-if="$authPass('oms.order.submitWarehouse')">提交仓库</a-doption>
                        <a-doption value="5" v-if="orderStatus == 'UNSHIPPED_TOSHIP' && $authPass('oms.order.updatePackageWarehouse')">换仓</a-doption>
                        <a-doption value="6" v-if="orderStatus == 'UNSHIPPED_TOSHIP'">撤回待审核</a-doption>
                        <a-doption value="7" v-if="orderStatus == 'UNSHIPPED_TOSHIP' && packageItem.isMultichannel && $authPass('oms.order.mulitChannel.cancel')" style="color: red">取消多渠道配送</a-doption> -->

                        <a-doption value="1" v-if="['TO_CHECK'].includes(packageItem.status) && $authPass('oms.order.updatePackageWarehouse')">指定发货仓</a-doption>
                        <a-doption value="2" v-if="['TO_CHECK', 'TO_HAND'].includes(packageItem.status) && $authPass('oms.order.createOrderShip')">物流下单</a-doption>
                        <a-doption value="3" v-if="['TO_CHECK', 'TO_HAND'].includes(packageItem.status) && ($authPass('oms.order.mulitChannel.bind') || $authPass('oms.order.mulitChannel.create'))">多渠道配送</a-doption>
                        <a-doption value="4" v-if="['TO_CHECK'].includes(packageItem.status) && $authPass('oms.order.submitWarehouse')">提交仓库</a-doption>
                        <a-doption value="5" v-if="['TO_HAND'].includes(packageItem.status) && $authPass('oms.order.updatePackageWarehouse')">换仓</a-doption>
                        <a-doption value="6" v-if="['IN_PICKING', 'TO_OUTBOUND'].includes(packageItem.status)">撤回待审核</a-doption>
                        <a-doption value="7" v-if="['TO_HAND'].includes(packageItem.status) && packageItem.isMultichannel && $authPass('oms.order.mulitChannel.cancel')" style="color: red">取消多渠道配送</a-doption>
                      </template>
                    </a-dropdown>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <a-empty v-else description="暂无包裹信息" />
        </div>

        <div class="footer">
          <div class="email fl lh40">
            <div class="icon icon-gerenfill fl"></div>
            <div class="fl" style="margin: 0 0 0 5px">
              <TextHidden style="width: 100px" :rows="1" position="top">{{ item.buyerEmail }}</TextHidden>
            </div>
          </div>
          <div class="leave-message fl lh40">
            <div class="label-text fl">买家留言：</div>
            <div class="fl">
              <TextHidden style="width: 100px" :rows="1" position="top">{{ item.buyerLeaveMessage }}</TextHidden>
            </div>
          </div>
          <div class="remark fl lh40 block-con">
            <div class="label-text fl">订单备注：</div>
            <div class="fl">
              <TextHidden style="width: 130px" :rows="1" position="top">{{ item.remarkList && item.remarkList[0] ? item.remarkList[0].remark : '' }}</TextHidden>
            </div>
            <div @click="showRemarkModal('order', item)" class="icon icon-zdp-bianji1 fl highlight"></div>
          </div>
          <div class="is-spurious-delivery fl lh40">
            <div class="label-text fl">标发：</div>
            <div class="fl">{{ isFeedCheckSuccess ? '同步成功' : '未同步' }}</div>
          </div>

          <div class="user-info fr lh40">
            <div class="label-text fl">收货信息：</div>
            <div class="address-info fl">{{ $extract(item, 'address.userName') }}</div>
            <div class="address-info fl">{{ $extract(item, 'address.country') }}{{ $extract(item, 'address.countryCode') }}</div>
            <div class="address-info fl" style="border-right: none">{{ $extract(item, 'address.stateOrRegion') }}</div>
            <a-popover>
              <a-button type="text"><icon-down style="font-size: 30px; margin-top: 5px" /></a-button>
              <template #content>
                <div style="width: 300px">
                  <div style="overflow: hidden">
                    <div class="label-text info-item fl">收件人：</div>
                    <div style="width: 240px; float: left">{{ $extract(item, 'address.userName') }}</div>
                  </div>
                  <div style="overflow: hidden">
                    <div class="label-text info-item fl">国家：</div>
                    <div style="width: 240px; float: left">{{ $extract(item, 'address.country') }}{{ $extract(item, 'address.countryCode') ? `(${$extract(item, 'address.countryCode')})` : '' }}</div>
                  </div>
                  <div style="overflow: hidden">
                    <div class="label-text info-item fl">省/州：</div>
                    <div style="width: 240px; float: left">{{ $extract(item, 'address.stateOrRegion') }}{{ $extract(item, 'address.stateOrRegionCode') ? `(${$extract(item, 'address.stateOrRegionCode')})` : '' }}</div>
                  </div>
                  <div style="overflow: hidden">
                    <div class="label-text info-item fl">城市：</div>
                    <div style="width: 240px; float: left">{{ $extract(item, 'address.city') }}</div>
                  </div>
                  <div style="overflow: hidden">
                    <div class="label-text info-item fl">电话：</div>
                    <div style="width: 240px; float: left">{{ $extract(item, 'address.phoneNumber') }}</div>
                  </div>
                  <div style="overflow: hidden">
                    <div class="label-text info-item fl">邮编：</div>
                    <div style="width: 240px; float: left">{{ $extract(item, 'address.postalCode') }}</div>
                  </div>
                  <div style="overflow: hidden">
                    <div class="label-text info-item fl">地址1：</div>
                    <div style="width: 240px; float: left">{{ $extract(item, 'address.address') || '--' }}</div>
                  </div>
                  <div style="overflow: hidden">
                    <div class="label-text info-item fl">地址2：</div>
                    <div style="width: 240px; float: left">{{ $extract(item, 'address.address1') || '--' }}</div>
                  </div>
                  <div style="overflow: hidden">
                    <div class="label-text info-item fl">地址3：</div>
                    <div style="width: 240px; float: left">{{ $extract(item, 'address.address2') || '--' }}</div>
                  </div>
                </div>
              </template>
            </a-popover>
          </div>
        </div>
      </div>
    </a-checkbox-group>
  </a-scrollbar>
  <ProductDetail ref="procudtDetail" :info="itemsInfo" @save="getList" />
  <MatchProductSku ref="matchSku" :info="itemsInfo" @save="getList" />
  <Remark ref="remark" :type="remarkType" :info="itemsInfo" @save="getList" />
  <Pack ref="pack" :ids="[itemsInfo.id]" @save="getList" />
  <MatchWarehouse ref="matchWarehouse" type="package" :selectRow="selectRow" @save="getList" />
  <LogisticsOrder ref="logisticsOrder" type="package" :selectRow="selectRow" @save="getList" />
  <IsChannelOrder ref="isChannelOrder" @show="show" @openOrder="showOpenOrderModal" :isMulOrder="isMulOrder" />
  <RelevanceChannelOrder ref="relevanceChannelOrder" :info="itemsInfo" @save="getList" />
  <CreateChannelOrder ref="createChannelOrder" :info="itemsInfo" @save="getList" />
  <HandleOpenOrder ref="handerOpenOrder" :info="itemsInfo" @save="getList" />
  <SubmitForDelivery ref="submitForDelivery" :type="submitWarehouseType" :selectRow="selectRow" @save="getList" />
  <CancelOrder ref="cancelOrder" :selectRow="selectRow" @save="getList" />
  <EditAddress ref="editAddress" :info="itemsInfo" @save="getList" />
  <CommonLogsDialog v-if="showLogDialog" api="listOrderLogs" :id="itemsInfo.id" :isShow="showLogDialog" @closed="showLogDialog = false" />
</template>

<script lang="ts">
  import { defineComponent, ref, toRefs, reactive, getCurrentInstance } from 'vue'
  import { useRouter } from 'vue-router'
  import { currencySymbol } from '@/utils/globalData'
  import { stopHandOrder, cancelOrder, relieveStopHandOrder, findInventoryBatch, rollbackTocheck, cancelFulfillmentOrder, delOrders } from '@/api/order'
  import { Message, Modal } from '@arco-design/web-vue'
  import ProductDetail from './showProductDetail.vue'
  import MatchProductSku from './matchProductSku.vue'
  import Remark from './remark.vue'
  import Pack from './pack.vue'
  import MatchWarehouse from './matchWarehouse.vue'
  import LogisticsOrder from './logisticsOrder.vue'
  import IsChannelOrder from './isChannelOrder.vue'
  import RelevanceChannelOrder from './relevanceChannelOrder.vue'
  import CreateChannelOrder from './createChannelOrder.vue'
  import HandleOpenOrder from './handleOpenOrder.vue'
  import SubmitForDelivery from './submitForDelivery.vue'
  import CancelOrder from './cancelOrder.vue'
  import EditAddress from './editAddress.vue'
  import CommonLogsDialog from '@/components/Log/logsDialog.vue'
  import _ from 'lodash-es'
  import { watch } from 'vue'

  export default defineComponent({
    components: { ProductDetail, CommonLogsDialog, MatchProductSku, EditAddress, CancelOrder, SubmitForDelivery, HandleOpenOrder, Remark, Pack, MatchWarehouse, LogisticsOrder, IsChannelOrder, RelevanceChannelOrder, CreateChannelOrder },
    props: ['dataList', 'modelValue', 'parentSetTag', 'orderStatus', 'getList', 'loading', 'statusCurrentIndex', 'showAddModal'],
    setup(props: any, { emit }) {
      const procudtDetail = ref()
      const matchSku = ref()
      const remark = ref()
      const pack = ref()
      const matchWarehouse = ref()
      const logisticsOrder = ref()
      const isChannelOrder = ref()
      const relevanceChannelOrder = ref()
      const createChannelOrder = ref()
      const handerOpenOrder = ref()
      const submitForDelivery = ref()
      const cancelOrder = ref()
      const editAddress = ref()
      const router = useRouter()
      const data: any = reactive({
        value: true,
        now: Date.now(),
        tagList: [
          { name: '标签1', color: 'red' },
          { name: '标签1', color: 'yellow' },
          { name: '标签1', color: 'green' },
          { name: '标签1', color: 'red' },
          { name: '标签1', color: 'yellow' },
          { name: '标签1', color: 'green' },
        ],
        itemsInfo: {},
        remarkType: 'product',
        currencyObj: currencySymbol,
        // tableDataList: props.dataList,
        checkIdList: [],
        selectRow: [],
        showLogDialog: false,
        amtAvailableResList: [],
        submitWarehouseType: '',
        userSelOrderItemInfo: {},
        isMulOrder: false,
      })

      // let checkList = computed({
      //   set(val: Array<string>) {
      //     let newArr: any = []
      //     data.tableDataList.forEach((e: any) => {
      //       let obj = val.find((el) => el == e.id)
      //       if (obj) newArr.push(obj)
      //     })
      //     emit('update:modelValue', newArr)
      //   },
      //   get(val) {
      //     return val || []
      //   },
      // })

      const showProductModal = (item: any, orderItem: any) => {
        item.platformOrderNumber = orderItem.platformOrderNumber
        data.itemsInfo = item || {}
        procudtDetail.value.visible = true
      }
      const matchSkuForUser = (item: any) => {
        data.itemsInfo = item || {}
        matchSku.value.visible = true
      }
      const showRemarkModal = (type: string, item: any) => {
        data.remarkType = type
        data.itemsInfo = item || {}
        remark.value.visible = true
      }
      const showPackModal = (item: any) => {
        data.itemsInfo = item || {}
        pack.value.visible = true
      }

      const doptionSelect = (value: string, item: any, orderItem: any) => {
        data.itemsInfo = item || {}
        if (value == '1' || value == '5') {
          data.selectRow = []
          data.selectRow.push(item)
          matchWarehouse.value.visible = true
        } else if (value == '2') {
          let orderInfo = _.cloneDeep(orderItem)
          delete orderInfo.packageList
          delete orderInfo.itemList
          delete orderInfo.remarkList
          delete orderInfo.tagList
          delete orderInfo.packageItemList
          data.selectRow = []
          data.selectRow.push({ ...orderInfo, ...item, platform: orderInfo.platform })
          logisticsOrder.value.visible = true
        } else if (value == '4') {
          data.selectRow = []
          data.selectRow.push(item)
          data.submitWarehouseType = 'package'
          submitForDelivery.value.visible = true
        } else if (value == '3') {
          if (getProductNum(orderItem) > 1 && packageStatus(orderItem)) {
            data.isMulOrder = true
          }

          data.userSelOrderItemInfo = {}
          data.userSelOrderItemInfo = orderItem
          let orderInfo = _.cloneDeep(orderItem)
          delete orderInfo.packageList
          delete orderInfo.itemList
          delete orderInfo.remarkList
          delete orderInfo.tagList
          data.itemsInfo = Object.assign(item, { customOrderInfo: orderInfo })
          isChannelOrder.value.visible = true
        } else if (value == '6') {
          cancelToCheck(item)
        } else if (value == '7') {
          cancelChannelsOrder(item)
        }
      }

      const cancelToCheck = (item: any) => {
        Modal.confirm({
          title: '提示',
          content: `请在次确认是否将包裹撤回到待审核状态？`,
          cancelText: '取消',
          okText: '确认',
          titleAlign: 'start',
          onOk: async () => {
            let res: any = await rollbackTocheck([item.id])
            if (res.code == 'SUCCESS') {
              Message.success('撤回待审核成功')
              props.getList()
            }
          },
        })
      }

      const cancelChannelsOrder = (item: any) => {
        Modal.confirm({
          title: '取消多渠道配送',
          content: `请在次确认是否将包裹，取消多渠道配送？`,
          cancelText: '取消',
          okText: '确认',
          titleAlign: 'start',
          onOk: async () => {
            let res: any = await cancelFulfillmentOrder({ packageId: item.id })
            if (res.code == 'SUCCESS') {
              Message.success('取消多渠道配送成功')
              props.getList()
            }
          },
        })
      }

      const orderSelect = (value: string, item: any) => {
        switch (value) {
          case '4':
            data.selectRow = []
            data.selectRow.push(item)
            cancelOrder.value.visible = true
            break
          case '2':
            data.itemsInfo = item
            handerOpenOrder.value.visible = true
            break
          case '1':
            data.selectRow = []
            data.selectRow.push(item)
            data.submitWarehouseType = 'order'
            submitForDelivery.value.visible = true
            break
          case '3':
            banOrder(item)
            break
          case '8':
            data.itemsInfo = item
            data.showLogDialog = true
            break
          case '5':
            props.showAddModal('edit', item)
            break
          case '6':
            delHandleCreateOrder(item)
            break
        }
      }

      const delHandleCreateOrder = (item: any) => {
        Modal.confirm({
          title: '提示',
          content: `是否删除订单？`,
          cancelText: '取消',
          okText: '确认',
          titleAlign: 'start',
          onOk: async () => {
            let res: any = await delOrders([item.id])
            if (res.code == 'SUCCESS') {
              Message.success('删除订单成功')
              props.getList()
            }
          },
        })
      }

      const banOrder = (item: any) => {
        Modal.confirm({
          title: '禁止处理',
          content: `请在次确认是否将订单${item.platformOrderNumber}，标记为禁止处理？`,
          cancelText: '取消',
          okText: '确认',
          titleAlign: 'start',
          onOk: async () => {
            let res: any = await stopHandOrder([item.id])
            if (res.code == 'SUCCESS') {
              Message.success('禁止处理成功')
              props.getList()
            }
          },
        })
      }
      const relieveStop = (item: any) => {
        Modal.confirm({
          title: '解除禁止处理',
          content: `请在次确认是否将订单${item.platformOrderNumber}，解除禁止处理？`,
          cancelText: '取消',
          okText: '确认',
          titleAlign: 'start',
          onOk: async () => {
            let res: any = await relieveStopHandOrder([item.id])
            if (res.code == 'SUCCESS') {
              Message.success('解除禁止处理成功')
              props.getList()
            }
          },
        })
      }

      const show = (type: string) => {
        type == '1' ? (relevanceChannelOrder.value.visible = true) : (createChannelOrder.value.visible = true)
      }

      const filterFulfillmentType = (type: string) => {
        let text = ''
        switch (type) {
          case 'AFN':
            text = '亚马逊仓发货'
            break
          case 'MFN':
            text = '自配送'
            break
          case 'MCF':
            text = '亚马逊多渠道'
            break
          default:
            text = '--'
            break
        }
        return text
      }

      const getImage = (item: any) => {
        if (item.isCustom) {
          let arr = item.customPics ? item.customPics.split(',') : []
          return arr[0] ? arr[0] : item.productPic
        } else {
          return item.productPic
        }
      }

      const changeChecked = (val: string) => {
        let newArr: any = []
        data.checkIdList.forEach((e: any) => {
          let obj = props.dataList.find((el: any) => el.id == e)
          if (obj) newArr.push(obj)
        })

        emit('update:modelValue', newArr)
      }

      const setTag = (item: any) => {
        props.parentSetTag('single', item)
      }

      const getProductNum = (item: any) => {
        let num = 0
        if (item.packageList && item.packageList[0]) {
          item.packageList.forEach((e: any) => {
            num += e.packageItemList.length
          })
        }
        return num
      }

      const showEditAddModal = (item: any) => {
        data.itemsInfo = item
        editAddress.value.visible = true
      }

      const toDetail = (item: any) => {
        router.push({
          path: '/order/pickUpOrder/components/fbmOrderDetail',
          query: {
            id: item.id,
          },
        })
      }

      const getFindInventoryBatch = async () => {
        let packageArr: any = []
        let productArr: any = []
        props.dataList.forEach((e: any) => {
          if (e.packageList && e.packageList[0]) {
            e.packageList.forEach((el: any) => {
              let obj = el
              obj.sellerId = e?.sellerId || ''
              obj.marketplaceId = e?.marketplaceId || ''
              packageArr.push(obj)
            })
          }
        })

        packageArr.forEach((e: any) => {
          e.packageItemList.forEach((el: any) => {
            el.warehouseCode = e.warehouseCode
            el.sellerId = e.sellerId
            el.marketplaceId = e.marketplaceId
            productArr.push(el)
          })
        })

        let params: any = {
          inventoryItems: [],
        }
        productArr.forEach((e: any) => {
          let obj = {
            warehouseCode: e?.warehouseCode || '',
            // msku: e?.msku || '',
            marketplaceId: e?.marketplaceId || '',
            sellerId: e?.sellerId || '',
            sku: e?.productSku || '',
            key: `${e?.orderPackageId || ''}_${e?.id || ''}`,
          }
          params.inventoryItems.push(obj)
        })
        const res: any = await findInventoryBatch(params)
        data.amtAvailableResList = res?.data?.inventoryItems
      }

      const whetherOutOfStock = (packageItem: any, item: any) => {
        let obj = data.amtAvailableResList.find((e: any) => e.key == `${item.orderPackageId}_${item.id}`)
        if (obj && obj.amtAvailable !== null && ['TO_CHECK', 'TO_HAND'].includes(packageItem.status)) {
          if (obj.amtAvailable < item.qtyOrdered) {
            return true
          } else {
            return false
          }
        } else {
          return false
        }
      }

      const showOpenOrderModal = () => {
        data.itemsInfo = data.userSelOrderItemInfo
        handerOpenOrder.value.visible = true
      }

      const filterStatus = (num: number) => {
        let text = ''
        if (num == -201) {
          text = '已退款'
        } else if (num == -200) {
          text = '已退货'
        } else if (num >= -199 && num <= -100) {
          text = '已取消'
        } else if (num >= 200 && num <= 299) {
          switch (num) {
            case 201:
              text = '待审核'
              break
            case 202:
              text = '待发货'
              break
            case 203:
              text = '部分发货'
              break
            case 204:
              text = '多渠道中'
              break
          }
        } else if (num >= 600 && num <= 699) {
          text = ' 已发货'
        }
        return text
      }

      const filterPackageStatus = (item: any) => {
        let text = ''
        switch (item.status) {
          case 'TO_CHECK':
            text = '待审核'
            break
          case 'TO_HAND':
            text = '待处理'
            break
          case 'IN_PICKING':
            text = '拣货中'
            break
          case 'TO_OUTBOUND':
            text = '待出库'
            break
          case 'HAS_OUTBOUND':
            text = '已出库'
            break
          case 'HAS_SHIPPED':
            text = '已运出'
            break
          case 'ERROR_TRACK':
            text = '跟踪异常'
            break
          case 'HAS_DELIVERY':
            text = '已交付'
            break
          default:
            text = '未知'
            break
        }
        return text
      }

      const packageStatus = (item: any) => {
        let packageNum = item.packageList.length
        let toCheckNum = item.packageList.filter((e: any) => e.status == 'TO_CHECK').length
        return packageNum == toCheckNum
      }

      watch(
        () => props.dataList,
        () => {
          getFindInventoryBatch()
        },
        { immediate: true }
      )

      return {
        ...(toRefs(data) as any),
        procudtDetail,
        showProductModal,
        matchSku,
        matchSkuForUser,
        remark,
        showRemarkModal,
        pack,
        showPackModal,
        doptionSelect,
        orderSelect,
        matchWarehouse,
        logisticsOrder,
        isChannelOrder,
        relevanceChannelOrder,
        createChannelOrder,
        show,
        filterFulfillmentType,
        getImage,
        changeChecked,
        setTag,
        handerOpenOrder,
        getProductNum,
        submitForDelivery,
        cancelOrder,
        toDetail,
        editAddress,
        showEditAddModal,
        relieveStop,
        whetherOutOfStock,
        filterStatus,
        filterPackageStatus,
        showOpenOrderModal,
        packageStatus,
        // checkList,
        // checkOrder,
      }
    },
  })
</script>

<style lang="less" scoped>
  .block-con {
    &:hover {
      .icon-zdp-bianji1 {
        display: block;
      }
    }
  }

  .icon-zdp-bianji1 {
    cursor: pointer;
    user-select: none;
    font-weight: 700;
    color: #7f7f7f !important;
    display: none;
  }

  .text-scale {
    display: inline-block;
    transform: scale(0.8);
  }

  .stockout {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid red;
    color: red;
    font-size: 12px;
    border-radius: 5px;
    transform: scale(0.7);
  }

  .label-text {
    color: #7f7f7f;
  }

  .lh50 {
    line-height: 50px;
  }

  .lh40 {
    line-height: 40px;
  }

  .arco-scrollbar-type-embed {
    height: 100%;
  }

  :deep(.arco-statistic-value) {
    font-size: 14px !important;
    color: red;
  }

  .item {
    border: 1px solid #d7d7d7;
    margin-bottom: 10px;
    width: 1685px;
    .top {
      height: 50px;
      background-color: #f2f3f5;
      width: 100%;
      .shop {
        width: 140px;
        margin-left: 10px;
        display: inline-block;
        .shop-name {
          margin-left: 5px;
          // margin-top: 14px;
        }
      }

      .order-billNo {
        width: 280px;
        display: inline-block;
        .bill-no {
          display: flex;
          align-items: center;
          :deep(.arco-typography) {
            margin-bottom: 0;
            margin-top: 14px;
          }
        }
      }

      .order-price {
        width: 140px;
      }

      .order-time {
        width: 300px;
      }

      .order-deliver-time {
        width: 300px;
      }

      .order-tag {
        width: 280px;
        .tag-item {
          float: left;
          padding: 0 5px;
          box-sizing: border-box;
          border-radius: 5px;

          margin: 2px 5px 2px 0;
          font-size: 10px;
        }

        .tag-bgc {
          color: white;
        }

        .set-btn {
          cursor: pointer;
          user-select: none;
          border: 1px solid #7f7f7f;
        }
      }

      .handle-btn {
        margin-right: 10px;
      }
    }

    .middle {
      border-top: 1px dashed #d7d7d7;
      border-bottom: 1px dashed #d7d7d7;
      padding: 10px 5px;
      .no-collapse,
      .collapse {
        .btn-collapse {
          min-height: 100px;
          width: 60px;
        }
        .con {
          display: flex;
          width: calc(100% - 60px);
          border-bottom: 1px dashed #d7d7d7;
          // margin-left: 60px;

          &:last-child {
            border-bottom: none;
          }

          padding-bottom: 10px;
          .left {
            height: auto;
            width: 18px;
            color: white;
            text-align: center;
            position: relative;
            background-color: #169bd5;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            span {
              position: absolute;
              top: 0;
              left: 0;
              // transform: translateY(-50%);
            }
          }
          .center {
            border-right: 1px solid #d7d7d7;
            .flag {
              width: 60px;
              height: 20px;
              line-height: 20px;
              position: absolute;
              top: 2px;
              left: 20px;
              background-color: red;
              color: white;
              transform: rotate(45deg);
              z-index: 10;
              font-size: 10px;
              text-align: center;
            }
            .product-item {
              height: 80px;
              margin: 0 0 5px 3px;
              &:last-child {
                margin-bottom: 0;
              }
              .product-status {
                background-color: #169bd5;
                color: white;
                text-align: center;
                height: 20px;
                line-height: 20px;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
              }
            }

            .order-id {
              margin: 0 10px;
              div {
                width: 120px;
              }
            }

            .order-sell-info {
              margin: 0 10px;
              .text-value {
                width: 80px;
              }
            }

            .order-num {
              margin: 0 10px;
              .text-value {
                width: 80px;
              }
            }
            .order-pack {
              margin: 0 10px;
              .text-value {
                width: 80px;
              }
            }
          }

          .right {
            margin-left: 10px;
          }
        }
      }
    }

    .footer {
      height: 50px;
      background-color: #f2f3f5;
      padding: 5px 0;
      box-sizing: border-box;
      .email {
        width: 140px;
        margin-left: 10px;
        border-right: 1px solid #d7d7d7;
      }

      .leave-message {
        padding-left: 10px;
        width: 200px;
        border-right: 1px solid #d7d7d7;
      }

      .remark {
        padding-left: 10px;
        width: 250px;
        border-right: 1px solid #d7d7d7;
      }

      .is-spurious-delivery {
        padding-left: 10px;
      }

      .user-info {
        margin-right: 10px;
        .address-info {
          padding: 0 10px;
          border-right: 1px solid #d7d7d7;
          &:last-child {
            border: none;
          }
        }
      }
    }
  }

  .info-item {
    width: 60px;
    text-align: right;
  }
</style>
